<template>
<div class="main">
  <div class="recommend">
   <Menu title="宠物视频" :menulist="menulist" v-if="menuHide"></Menu>
    <Content :widths="widths"></Content>
  </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapMutations } from 'vuex'
import scroll from '@/util/scroll'
import Menu from '../../components/MenuView.vue'
import Content from '../../components/contentView.vue'
export default {
  data () {
    return {
      menulist: [
        {
          icon: 'icon-rementuijian',
          name: '推荐',
          path: '/video/allvideo'
        },
        {
          icon: 'icon-guanzhu',
          name: '关注',
          path: '/video/follow'
        },

        {
          icon: 'icon-shipin',
          name: '视频号',
          path: '/video/hotuser'
        },
        {
          icon: 'icon-paihangbang',
          name: '排行榜',
          path: '/video/hotlist'
        },
        {
          icon: 'icon-lishi',
          name: '历史记录',
          path: '/video/history'
        }
      ],
      widths: '83%',
      screenWidth: document.body.clientWidth, // 窗口当前的可视宽度
      menuHide: true // 侧边栏
    }
  },
  components: {
    Menu,
    Content
  },
  mounted () {
    console.log(this.$store.state.isHeaher)

    // 加载页面数据 获取宽度
    this.getNowWidth()
    // 监听窗口宽度的变化
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  watch: {
    screenWidth (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        const that = this
        if (this.screenWidth <= 1152 && this.screenWidth > 856) {
          this.menuHide = true
          this.widths = '9.05rem'
        } else if (this.screenWidth > 1152) {
          this.widths = '83%'
          this.menuHide = true
        } else if (this.screenWidth <= 856 && this.screenWidth > 612) {
          this.widths = '8.8rem'
          this.menuHide = true
        } else if (this.screenWidth <= 612) {
          this.widths = '11rem'
          this.menuHide = false
        }
        setTimeout(function () {
          // console.log(that.widths)
          // 打印screenWidth变化的值
          console.log(that.screenWidth)
          that.timer = false
        }, 300)
      }
    }
  },
  methods: {
    ...mapMutations(['isLogin', 'updateTabbar', 'updateMenu', 'navbarHide', 'menusHide']),
    // 获取当前屏幕的高度
    async getNowWidth () {
      this.screenWidth = await scroll.getClientWidth()

      if (this.screenWidth < 612) {
        this.widths = '11.22rem'
        this.menuHide = false
      }
      if (this.screenWidth <= 540) {
        this.widths = '11.22rem'
        this.menuHide = false
        // 隐藏pc顶部导航栏
        this.isLogin(false)
        // 显示底部的导航栏
        this.updateTabbar(true)
        // 显示手机端头部导航栏
        this.navbarHide(true)
        // 显示手机端头部菜单menumini
        this.menusHide(true)
        this.updateMenu([
          {
            icon: 'icon-rementuijian',
            name: '推荐',
            path: '/video/allvideo'
          },
          {
            icon: 'icon-guanzhu',
            name: '关注',
            path: '/video/follow'
          },
          {
            icon: 'icon-paihangbang',
            name: '排行榜',
            path: '/video/hotlist'
          },
          {
            icon: 'icon-lishi',
            name: '历史记录',
            path: '/video/history'
          }
        ])
      } else if (this.screenWidth > 540) {
        // 显示pc顶部导航栏
        this.isLogin(true)
        // 隐藏底部的导航栏
        this.updateTabbar(false)
        // 隐藏手机端头部导航栏
        this.navbarHide(false)
      }
    }
  }

}
</script>
<style lang="scss" scoped>
 .main{
    width: 1122px;
    margin: 0 auto;
    height: auto;
    padding-top: 64px;

  }
@media screen and (min-width:1054px) and (max-width:1154px) {
    .main{
    width: 11.22rem;
    margin: 0 auto;
    height: auto;
    padding-top: 64px;

  }
}
@media screen and (min-width: 540px)  and (max-width:1054px) {
    .main{
    width: 11.22rem;
    margin: 0 auto;
    height: auto;
   padding-top: 64px;

  }

}
@media screen  and (max-width:540px) {
    .main{
    width: 11.22rem;
    margin: 0 auto;
    height: auto;
   padding-top: 0;

  }
  }
.recommend {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
</style>
